<template>
  <div class="login-container">
    <!-- 导航栏 -->
    <van-nav-bar
      class="app-nav-bar"
      title="注册 / 登录"
      left-arrow
      @click-left="$router.back()"
    />

    <!-- 登陆表单 -->
    <!-- 
      基于Vant的表单验证：
        1.使用van-form组件包裹所有的表单项 van-field
        2.给van-form绑定submit事件，提交时触发，表单验证通过，才会调用submit
        3.使用Field的rules属性定义校验规则
     -->
    <van-form
      :show-error="false"
      :show-error-message="false"
      validate-first
      ref="login-form"
      @failed="onFailed"
    >
      <van-cell-group inset>
        <van-field
          center
          v-model="user.mobile"
          icon-prefix="toutiao"
          left-icon="shouji"
          placeholder="请输入手机号"
          name="mobile"
          :rules="formRules.mobile"
        />
        <van-field
          center
          v-model="user.code"
          icon-prefix="toutiao"
          left-icon="yanzhengma"
          clearable
          placeholder="请输入验证码"
          name="code"
          :rules="formRules.code"
        >
          <template #button>
            <!-- 倒计时组件 -->
            <van-count-down
              v-if="isCountDownShow"
              :time="1000 * 60"
              format="ss s"
              @finish="isCountDownShow = false"
            />
            <van-button
              v-else
              class="send-btn"
              size="mini"
              round
              :loading="isSendSmsLoading"
              @click.prevent="onSendSms"
              >发送验证码</van-button
            >
          </template>
        </van-field>
      </van-cell-group>
      <div class="login-btn-wrap">
        <van-button class="login-btn" type="primary" block @click="onLogin"
          >登陆</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { login, sendSms } from "@/api/user";
/* import {
    Toast
  } from 'vant'; */
export default {
  // 组件名称
  name: "LoginIndex",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {
      user: {
        mobile: "13611111111",
        code: "246810",
      },
      formRules: {
        mobile: [
          {
            required: true,
            message: "请输入手机号",
          },
          {
            pattern: /^1[3|5|7|8|9]\d{9}$/,
            message: "手机号格式错误",
          },
        ],
        code: [
          {
            required: true,
            message: "请输入验证码",
          },
          {
            pattern: /^\d{6}$/,
            message: "验证码格式错误",
          },
        ],
      },
      isCountDownShow: false, //控制倒计时和发送按钮的显示状态
      isSendSmsLoading: false, //发送验证码按钮的loading状态
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  created() {},
  mounted() {},
  // 组件方法
  methods: {
    //点击登录按钮触发
    async onLogin() {
      /* let formData = new FormData()
        formData.append('mobile', '13611111111')
        formData.append('code', '246810') */
      //登陆中
      this.$toast.loading({
        message: "登陆中...", //提示文本
        forbidClick: true, //禁止点击
        duration: 0, //展示时长(ms)，值为 0 时，toast 不会消失
      });
      //1.找到数据接口
      //2.封装请求方法
      //3.请求调用登录
      try {
        const { data } = await login(this.user);
        //4.处理响应结果
        this.$toast.success("登陆成功");

        //将后端返回的用户登陆状态（token等数据）放到Vuex容器中
        this.$store.commit("setUser", data.data);

        //清除 layout 的缓存，让它重新渲染
        this.$store.commit("removeCachePage", "LayoutIndex");

        //登陆成功，跳转回原来界面
        /* this.$router.back();这种方式不好 */
        this.$router.push(this.$route.query.redirect || "/");
      } catch (err) {
        console.log("登陆失败", err);
        this.$toast.fail("登陆失败，手机或验证码错误");
      }
    },
    //提交表单且验证不通过后触发
    onFailed(error) {
      if (error.errors[0]) {
        this.$toast({
          message: error.errors[0].message,
          position: top, //防止手机键盘太高遮挡错误提示
        });
      }
    },
    //点击发送验证码按钮触发
    async onSendSms() {
      try {
        //校验手机号码
        await this.$refs["login-form"].validate("mobile");
        //验证通过，按钮loading,请求发送验证码
        this.isSendSmsLoading = true;
        const res = await sendSms(this.user.mobile);
        console.log(res);

        //短信发出去了，隐藏发送按钮，显示倒计时
        this.isCountDownShow = true;
      } catch (err) {
        //try里面任何代码的错误都会进入catch
        //不同的错误需要有不同的提示，那就需要判断了
        let message = "";
        if (err && err.response && err.response.status === 429) {
          //发送短信失败的错误提示
          message = "发送频繁，请稍后再试";
        } else if (err.name === "mobile") {
          //表单验证失败的错误提示
          message = err.message;
        } else {
          //未知错误
          message = "发送失败,请稍后重试";
        }
        //提示用户
        this.$toast({
          message: message,
          position: top, //防止手机键盘太高遮挡错误提示
        });
      }
      //无论成功还是失败都关掉按钮的loading状态
      this.isSendSmsLoading = false;
      //验证通过->请求发送验证码->用户接收短信->输入验证码->请求登录
      //请求发送验证码->显示倒计时
      //倒计时结束->隐藏倒计时，显示发送按钮
    },
  },
};
</script>

<style scoped lang='less'>
.login-container {
  .send-btn {
    width: 76px;
    height: 23px;
    background-color: #ededed;

    .van-button_text {
      font-size: 11px;
      color: #666666;
    }
  }

  .login-btn-wrap {
    padding: 26px 16px;

    .login-btn {
      background-color: #6db4fb;
      border: none;

      .van-button_text {
        font-size: 15px;
      }
    }
  }
}
</style>